<script lang="ts" setup>
import { onMounted, shallowRef, shallowReactive } from '@vue/runtime-core';
import pageVue from '/src/lib/lay/page.vue';
const mockTableData = shallowReactive({
    opt: [
        {
            type: 'selection'
        },
        {
            prop: 'id',
            label: '订单号',
            width: 150
        },
        {
            prop: 'car',
            label: '车数',
            align: 'center'
        },
        {
            prop: 'time',
            label: '时间',
            type: 'time'
        },
        {
            prop: 'car_id',
            label: '车牌'
        },
        {
            prop: 'wl_name',
            label: '物料名称',
            type: 'wl_name'
        },
        {
            prop: 'mz',
            label: '毛重（kg）',
            width: 100
        },
        {
            prop: 'pz',
            label: '皮重（kg）',
            width: 100
        },
        {
            prop: 'jz',
            label: '净重（kg）',
            width: 100
        },
        {
            prop: 'shdw',
            label: '收货单位'
        },
        {
            prop: 'dj',
            label: '单价',
            width: 60,
            // align: 'center'
        },
        {
            prop: 'bz',
            label: '备注',
            align: 'center'
        },
    ],
    data: [
        ...Array(100).fill({
            id: 'SO2021061860784',
            car: 1,
            time: '2021/10/2',
            car_id: '浙HF4569',
            wl_name: '机制砂',
            mz: 62880,
            pz: 16420,
            jz: 46460,
            shdw: '岑昊恒筑',
            dj: 65,
            bz: null
        })
    ]
})
const TableSettingsVisible = shallowRef(false);
const TableSettings = shallowReactive({
    pageSize: 80
})
function updateTable() {
    TableSettingsVisible.value = false;
    mockTableData.data = JSON.parse(JSON.stringify(new Array(TableSettings.pageSize).fill({
        id: 'SO2021061860784',
        car: 1,
        time: '2021/10/2',
        car_id: '浙HF4569',
        wl_name: '机制砂',
        mz: 62880,
        pz: 16420,
        jz: 46460,
        shdw: '岑昊恒筑',
        dj: 65,
        bz: null
    })))
}

</script>
<template lang="pug">
pageVue
  template(v-slot:top)
    .grid
      .title
        
      .search
        .search-bar
          input
          img.icon-btn(src="/src/res/svg/search.svg")
      .table
        
      .pager
        span 共{{ 235172 }}条
        
      .actions
        
  template(v-slot:bottom)
    p Test
</template>
<style lang="scss" scoped>
.grid {
    padding: 20px;
    height: 100%;
    display: grid;
    grid-template-areas:
        "title title . . search"
        "table table table table table"
        "actions . . pager pager";
    grid-template-columns: auto auto 1fr auto auto;
    grid-template-rows: auto 1fr auto;
    gap: 10px;
    > * {
        margin: auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .title {
        padding: 10px;
        grid-area: title;
        font-size: 1.1em;
        font-weight: bold;
        cursor: pointer;
    }
    .search {
        grid-area: search;
        .search-bar {
            display: flex;
            padding: 6px;
            border-radius: 10px;
            background-color: #f0faf2;
            color: #a5a5a5;
            .icon-btn {
                flex-shrink: 0;
                width: 18px;
                cursor: pointer;
            }
            input {
                background-color: transparent;
                border: none;
                outline: none;
                margin: 0 5px;
                flex: 1;
                border-right: 1px solid #eee;
                padding: 0 10px;
            }
        }
    }
    .table {
        grid-area: table;
    }
    .actions {
        grid-area: actions;
    }
    .pager {
        grid-area: pager;
        display: flex;
        align-items: center;
        color: #5d5d5d;
        font-size: 14px;
    }
}
@media screen and (max-width: 1000px) {
    .grid {
        grid-template-areas:
            "title"
            "search"
            "table"
            "pager"
            "actions";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto auto;
    }
}
.grid {
    .table {
        ::v-deep(.el-table th) {
            // background-color: #f4f4f4 !important;
            height: 40px !important;
            padding: 0 0 !important;
        }
        ::v-deep(.el-table td) {
            height: 40px !important;
            padding: 0 0 !important;
        }
    }
}
</style>